<template>
	<view class="login">
		<view class="con">
			<view class="login-head">
				<view class="head-logo">
					<image mode="widthFix" src="../../../static/icon/gongzuotai.png"></image>
				</view>
				<view class="head-text">智慧社区 - 工作人员</view>
			</view>
			<view class="login-content">
				<view class="content-1">
					<u-input placeholder="请输入用户名" v-model="name" type="text" :border="false" />
				</view>
				<view class="content-1">
					<u-input placeholder="请输入密码" v-model="password" type="password" :border="false"
						:password-icon="true" />
				</view>
				<view class="content-2" @click="Login">登录</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// name: '17380209101',
				// password: '000000',
				name: '',
				password: ''
			}
		},
		methods: {
			Login() {
				let params = {
					userPhone: this.name,
					userPassword: this.password
				}
				if (this.name.trim() == '') {
					uni.showToast({
						title: '请输入用户名',
						icon: 'none'
					})
				}
				if (this.password.trim() == '') {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					})
				}
				this.$u.api.loginByPhone(params).then(res => {
					if (res.code == 200) {
						// console.log(res)
						this.$u.vuex('vuex_token', res.result.token)
						uni.setStorageSync("userId", res.result.userId)
						uni.setStorageSync("sig", res.result.sig)
						uni.reLaunch({
							url: '../../Home/Home'
						})
					}
				}).catch(err => {
					console.log(err)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login {
		background-color: #f5f6f7;
		min-height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;

		.con {
			height: 700rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			flex-direction: column;
		}

		.login-head {
			margin: 100rpx auto 0;
			width: 400rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			flex-direction: column;

			.head-logo {
				width: 100rpx;
			}

			.head-text {
				color: #007AFF;
				font-size: 35rpx;
				font-weight: 600;
				margin-top: 20rpx;
			}
		}

		.login-content {
			width: 500rpx;
			margin: 0 auto;

			.content-1 {
				margin-top: 20rpx;
				background-color: #f4f1f1;
				padding: 10rpx;
			}

			.content-2 {
				margin-top: 40rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #f4f1f1;
				font-size: 28rpx;
				color: #666;
				width: 100%;
				height: 80rpx;
				border-radius: 10rpx;
			}

			.content-2:active {
				background-color: #007AFF;
			}
		}
	}
</style>
